<template>
    <el-dialog title="班级信息" style="background: #F0F0F0;" :visible.sync="value" :show-close="false" center width="80%">

        <el-form ref="form" :model="classes" label-position="right" label-width="150px" size="mini">

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item prop="classesName" label="班级名称">
                        <el-input type="text" placeholder="请输入班级名称" v-model="classes.classesName" style="width: 220px;"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="curriculumId" label="所属阶段">
                        <el-cascader v-model="classes.curriculumId" :options="schoolList" :props="{emitPath:false,value:'id',label:'name',children:'children'}" style="width: 220px;">
                            <template slot-scope="{ node, data }">
                                <span>{{ data.name }}</span>
                                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                            </template>
                        </el-cascader>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item prop="jyId" label="带班教员">
                        <el-select v-model="classes.jyId" style="width: 220px;">
                            <el-option :key="item.id" :value="item.id" :label="item.nickName" v-for="item in teachers.jyTeacher"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="bzrId" label="带班班任">
                        <el-select v-model="classes.bzrId" style="width: 220px;">
                            <el-option :key="item.id" :value="item.id" :label="item.nickName" v-for="item in teachers.bzrTeacher"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item prop="zjId" label="带班助教">
                        <el-select v-model="classes.zjId" style="width: 220px;">
                            <el-option :key="item.id" :value="item.id" :label="item.nickName" v-for="item in teachers.zjTeacher"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="startTime" label="开班时间">
                        <el-date-picker value-format="yyyy-MM-dd" start-placeholder="开班时间" end-placeholder="毕业时间" type="daterange" placeholder="请选择开班时间" v-model="date" size="mini" style="width: 220px;"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <template slot="footer">
            <el-button type="info" @click="value = false" ><span class="el-icon-bell"></span>取消</el-button>
            <el-button type="success" @click="handleSubmit" ><span class="el-icon-loading"></span>提交</el-button>
        </template>

    </el-dialog>
</template>
<script>


    import { findTeachersByJobTitle } from '@/api/access/user.js'

    import { saveClasses } from '@/api/quality/classes.js'

    import { getCurriculumChildrenBySchool } from '@/api/academic/school.js'

    export default {
        name: 'classes-child',
        data(){
            return {
                date:[],
                schoolList:[],
                classes:{},
                value : false,
                teachers:{
                    jyTeacher:[],
                    zjTeacher:[],
                    bzrTeacher:[]
                }
            }
        },
        watch:{
            value(data){
                if(data){

                    findTeachersByJobTitle().then(res=>{
                        this.teachers = res.data.data;
                    });

                    getCurriculumChildrenBySchool().then(res=>{
                        if(res.data.success){
                            this.schoolList = res.data.data;
                        }
                    });

                }
            }
        },
        methods:{

            handleSubmit(){

                if(this.date.length == 0){
                    this.$message.error("请选择日期");
                    return false;
                }

                this.classes.startTime = this.date[0];
                this.classes.endTime = this.date[1];

                this.$refs['form'].validate(valid=>{
                    if(valid){
                        saveClasses(this.classes).then(res=>{
                            this.$message({
                                type:res.data.success ? 'success' : 'error',
                                message: res.data.message
                            });
                            this.value = false;
                            this.$parent.getClassesList(this.$parent.params);
                        });
                    }else{
                        return false;
                    }
                });
            }
        }
    }
</script>
<style scoped>

</style>